<!--订单概况-->
<template>
  <div class="order-index-wrap clear">
    <el-menu  >
      <h2 class="h1">订单概况</h2>
    </el-menu>
    <!--  列表区域-->
    <div class="order-index-list">
      <el-row class="statistic clear">
        <el-col :span="2" style="height: 18px"/>
        <el-col :span="4">
          <div>7天下单笔数</div>
          <div class="common-n">{{orderData.seven}}</div>
        </el-col>
        <el-col :span="4">
          <div>待付款</div>
          <div class="common-n">{{orderData.wait}}</div>
        </el-col>
        <el-col :span="4">
          <div>待发货</div>
          <div class="common-n">{{orderData.send}}</div>
        </el-col>
        <el-col :span="4">
          <div>积压维权</div>
          <div class="common-n">{{orderData.rights}}</div>
        </el-col>
        <el-col :span="4">
          <div>7天收入 | 提现</div>
          <div class="common-n">{{orderData.money}}</div>
        </el-col>
        <el-col :span="2" style="height: 18px"/>
      </el-row>
    </div>
    <!--  标签栏区域-->
    <div class="order-index-tag clear">
      <div class="order-index-tag-box " style="background-color: #F3F3F3;margin: 20px 0">
        <el-row style="padding: 10px">
          <el-col :span="10"><div class="grid-content bg-purple" style="margin-left: 42px"><span style="margin-right: 40px"><span style="color: red;text-align:center">| </span>7天收入</span><a style="color: #2a82e4">详情</a></div></el-col>
          <el-col :span="13" style="text-align: right"><a class="grid-content" style="text-align: right;color: #2a82e4">如何学习提高销量</a></el-col>
        </el-row>
      </div>
    </div>

    <!--  图表区域-->
    <div class="order-details-info">
      <el-row class="clear">
        <el-col :span="6">
          <div class="grid-content info-border info-box">
            <div class="info-box-bottom">
              <div style="padding-bottom: 35px">
                <p>昨日下单笔数</p>
                <p class="common-n">{{orderData.yesterday}}</p>
              </div>
              <p>昨日付款订单</p>
              <p class="common-n">{{orderData.pay}}</p>
            </div>
          </div>
        </el-col>
        <el-col :span="18">
          <div class="grid-content">
            <OrderEcharts></OrderEcharts>
          </div>
        </el-col>
      </el-row>
    </div>

  </div>
</template>

<script>
import { getAllOrder } from "@/http/orderService";
import OrderEcharts from "../components/OrderEcharts.vue";
export default {
  name: "OrderView",
  components:{OrderEcharts},
  data() {
    return {
      orderData: {},

    }
  },
  mounted: async function () {
    const result = await getAllOrder();
    console.log(result.data)
    if (result.data.code === "200") {
      this.orderData = result.data.data;
    }
  },
}

</script>

<style lang="scss" scoped>
.h1{
  padding: 0 15px 20px;
  font-weight: 200;
}
.common-n {
  color: #2a82e4;
}
.order-index-wrap {
  background-color: #fff;
  padding: 30px;
  .order-index-list {
    background-color: #F3F3F3;
    padding: 30px 0;
    .statistic {
      text-align: center;
    }
  }
  .order-details-info {
    width: 99%;
    margin: 16px auto;
    border: 1px solid #F3F3F3;
    .el-row {
      margin-bottom: 20px;
      &:last-child {
        margin-bottom: 0;
      }
    }
    .grid-content {
      min-height: 36px;
      //padding: 20px;
    }
    .info-border {
      .info-box-bottom {
        background-color: #F3F3F3;
        padding: 30px;
        text-align: center;
        height: 141px;
        width: 60%;
      }
    }
    .row-bg {
      padding: 10px 0;
    }
  }
}

</style>